<!-- src/views/Plans.vue -->
<template>
    <div class="plans">
      <!-- 周期说明 -->
      <div class="cycle-info">
        <van-cell title="当前计划">
          <template #label>
            <div class="cycle-desc">仅显示当前周期或最近结束周期的计划</div>
          </template>
        </van-cell>
      </div>
  
      <!-- 计划列表 -->
      <div class="plan-list">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              :error="error"
              error-text="请求失败，点击重试"
              @load="onLoad"
          >
            <!-- 加载状态 -->
            <div v-if="loading" class="loading-container">
              <van-loading type="spinner" size="24px">加载中...</van-loading>
            </div>
  
            <!-- 计划列表内容 -->
            <template v-else>
              <van-cell-group
                  v-for="plan in plans"
                  :key="plan.id"
                  class="plan-item"
                  @click="goToDetail(plan)"
              >
                <div class="plan-content">
                  <!-- 左侧信息 -->
                  <div class="plan-info">
                    <div class="plan-name">{{ plan.name }}</div>
                    <div v-if="plan.description" class="plan-description" :class="{'expanded': expandedIds.includes(plan.id)}">
                      {{ plan.description }}
                    </div>
                    <div class="cycle-time">
                      <van-icon name="clock-o" />
                      <span>{{ formatDateRange(plan.startTime, plan.endTime) }}</span>
                      <span class="cycle-type">
                        {{ getCycleTypeText(plan.cycleType) }}{{ plan.intervalCount }}{{ getCycleUnitText(plan.cycleType) }}
                      </span>
                    </div>
                  </div>
  
                  <!-- 右侧状态 -->
                  <div class="plan-status">
                    <van-tag :type="getPlanStatusType(plan)">
                      {{ getPlanStatusText(plan) }}
                    </van-tag>
                  </div>
                </div>
              </van-cell-group>
            </template>
  
            <!-- 空状态 -->
            <Empty
                v-if="!loading && plans.length === 0"
                description="暂无计划"
            />
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, inject } from 'vue'
  import { useRouter } from 'vue-router'
  import { latestCycle } from "@/api/common"
  import { Empty, Tag as VanTag } from "vant"
  
  
  // 状态定义
  const loading = ref(false)
  const finished = ref(false)
  const error = ref(false)
  const refreshing = ref(false)
  const plans = ref([])
  const expandedIds = ref([])
  const toast = inject("toast")
  
  const router = useRouter()
  
  const goToDetail = async (plan) => {
    try {
      await router.push(`/dayPlanDetail?id=${plan.id}`)
    } catch (error) {
    }
  }
  
  // 下拉刷新
  const onRefresh = () => {
    finished.value = false
    error.value = false
    getList()
  }
  
  // 加载更多（由于是一次性加载全部，这里仅处理状态）
  const onLoad = () => {
    finished.value = true
  }
  
  // 格式化日期范围
  const formatDateRange = (start, end) => {
    if (!start || !end) return ''
    const formatDate = (date) => {
      const d = new Date(date)
      return `${d.getMonth() + 1}月${d.getDate()}日`
    }
    return `${formatDate(start)} - ${formatDate(end)}`
  }
  
  // 获取计划状态类型
  const getPlanStatusType = (plan) => {
    if (plan.overduePendingCount > 0) return 'danger'
    if (plan.pendingCount > 0) return 'warning'
    if (plan.overdueCompletedCount > 0) return 'primary'
    return 'success'
  }
  
  // 获取计划状态文本
  const getPlanStatusText = (plan) => {
    if (plan.overduePendingCount > 0) return `超期未完成 ${plan.overduePendingCount}`
    if (plan.pendingCount > 0) return `待完成 ${plan.pendingCount}`
    if (plan.pendingCount === 0 && plan.overduePendingCount === 0) return '全部完成'
    return `已完成`
  }
  
  // 获取周期类型文本
  const getCycleTypeText = (type) => {
    return type === 'DAILY' ? '每' : '每'
  }
  
  // 获取周期单位文本
  const getCycleUnitText = (type) => {
    return type === 'DAILY' ? '天' : '周'
  }
  
  function getList() {
    loading.value = true
    latestCycle().then(res => {
        plans.value = res
        finished.value = true
        error.value = false
        loading.value = false
        refreshing.value = false
    }, err => {
        error.value = true
        loading.value = false
        refreshing.value = false
        toast.msg(err.message)
    })
  }

  // 页面加载
  onMounted(() => {
    getList()
  })
  </script>
  
  <style scoped>
  .plans {
    min-height: 100vh;
    background-color: #f7f8fa;
  }
  
  .cycle-info {
    margin-bottom: 12px;
  }
  
  .cycle-desc {
    font-size: 12px;
    color: #969799;
  }
  
  .plan-list {
    padding: 12px;
  }
  
  .loading-container {
    padding: 20px 0;
    text-align: center;
  }
  
  .plan-item {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 16px;
  }
  
  .plan-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
  }
  
  .plan-info {
    flex: 1;
    min-width: 0;
  }
  
  .plan-name {
    font-size: 16px;
    font-weight: 500;
    color: #323233;
    margin-bottom: 8px;
  }
  
  .plan-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  .plan-description.expanded {
    -webkit-line-clamp: unset;
  }
  
  .cycle-time {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 14px;
  }
  
  .cycle-type {
    color: #999;
    font-size: 12px;
  }
  
  .plan-status {
    padding-top: 4px;
  }
  
  :deep(.van-tag) {
    padding: 4px 8px;
  }
  
  :deep(.van-cell) {
    padding: 12px 16px;
  }
  
  :deep(.van-empty) {
    padding: 32px 0;
  }
  </style>